<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-13 11:08:06
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-27 10:56:03
 * @FilePath: \vue-admin-template\src\views\manage\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div style="margin-right: 20px;">
      <img
        src="../../images/4647.jpg_wh860.jpg"
        alt=""
        style="width: 300px; height: 265px; display: block; margin: 0 auto;"
      >
    </div>
    <div style="width: 600px;">
      <el-container direction="vertical">
        <el-header>
          <span class="ge">个人信息</span>
        </el-header>
        <el-main>
          <el-form ref="userInfoForm" :model="userInfo" :rules="rules" label-width="100px" class="custom-label">
            <el-form-item label="学号">
              <el-input v-model="userInfo.studentId" placeholder="学号" readonly />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="userInfo.password" type="password" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="userInfo.confirmPassword" type="password" placeholder="请再次输入密码" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateInfo">更新信息</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.userInfo.confirmPassword !== '') {
          this.$refs.userInfoForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userInfo.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      userInfo: {
        studentId: '',
        name: '',
        phone: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    updateInfo() {
      this.$refs.userInfoForm.validate((valid) => {
        if (valid) {
          // 这里应该是与后端联调的代码，发送姓名、手机号和密码到服务器
          console.log('更新的信息:', this.userInfo)
          // 模拟信息更新成功的提示
          this.$message({
            message: '信息更新成功',
            type: 'success'
          })
        } else {
          console.log('表单验证失败！')
          return false
        }
      })
    }
  }
}
</script>

<style>
.ge{
font-size: 22px;
    color: #1e1e1e;
    line-height: 26px;
    font-weight: bold;
    margin: 28px 0 0 30px;
    display: inline-block;
    font-style: normal;
   font-family: STFangsong;
   letter-spacing: 0.5em;
}

.custom-label .el-form-item__label {
  font-size: 14px;
  color: #696969;
  text-align: right;
  font-weight: 100;
  letter-spacing: 0.5em;
  font-family: Microsoft YaHei ;
  /* font-weight: bold; */
}
</style>
